<template>
  <div>
    <el-form ref="formRef" :model="formdata" label-position="right" label-width="120px" :rules="rules">
      <el-row>
        <el-col :span="20">
          <el-form-item label="选择对账日期" prop="dateRange">
            <el-date-picker v-model="formdata.dateRange" type="daterange" align="right" style="width: 90%;"
              unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
              :picker-options="pickerOptions" value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="saveFn" v-loading="saveLoading">确 定</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  import {
    validator
  } from '@/utils/validate';
  import {
    reportHistory,
    reportUrl
  } from '@/api/fleet';

  export default {
    data() {
      return {
        reportType: 9,
        formdata: {
          dateRange: '',
          startTime: undefined,
          endTime: undefined
        },
        saveLoading: false,
        rules: {
          dateRange: [{
            required: true,
            message: '请选择日期范围',
            trigger: ['blur']
          }]
        },
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        dateRange: '',
        timer: undefined
      };
    },
    activated() {
      this.$refs.formRef.resetFields();
    },
    methods: {
      open(row) {
        if (row) {
          this.reportType = 9 //row.reportType
          this.formdata.companyId = row.companyId;
          this.formdata.dateRange = ''
          this.dateRange = ''
          console.log(this.formdata)
        }
      },

      saveFn() {
        this.$refs.formRef.validate(valid => {
          if (valid) {
            console.log(this.formdata)
            this.formdata.startTime = `${this.formdata.dateRange[0]} 00:00:00`
            this.formdata.endTime = `${this.formdata.dateRange[1]} 23:59:59`
            console.log(this.formdata)
            this.saveLoading = true;
            let param = {
              reportType: this.reportType,
              search: this.formdata
            }
            // this.queryUrl('zim_report:25007_1735994501257')
            // return
            reportHistory(param)
              .then(response => {
                console.warn(response)
                //this.saveLoading = false;
                this.timer = setTimeout(() => this.queryUrl(response.msg), 3_000)
              })
              .catch(err => {
                this.saveLoading = false;
              })
          }
        })
      },
      queryUrl(reportKey) {
        reportUrl({
          reportKey: reportKey
        }).then(response => {
          console.log(response)
          if (response.code == 200) {
            if (response.data.reportUrl) {
              window.open(response.data.reportUrl, '_blank');
              this.saveLoading = false;
              return
            }
            clearTimeout(this.timer)
            this.timer = setTimeout(() => this.queryUrl(reportKey), 3_000)
          }
        }).catch(err => {
          this.saveLoading = false;
        })
      },
      handClose() {
        clearTimeout(this.timer)
      }
    }
  }
</script>
